<template>
  <div class="mnt-dialog form-container forgt-pwd2">
    <el-form ref="form" :rules="rules" :model="forgtPwd2" label-width="0" class="forgt-pwd1-container">
      <el-row :gutter="12">
        <el-col :span="12" :offset="6">
          <p class="tip">点击获取验证码，短信将发送至手机{{ telphone.slice(0, 3) }}****{{ telphone.slice(7) }}</p>
        </el-col>
        <el-col :span="8" :offset="6">
          <el-form-item prop="yanZhengMa">
            <el-input v-model="forgtPwd2.yanZhengMa" size="mini" />
            <!--<el-button type="primary" class="forgtPwd1Btn" style="width: 120px;" @click="getVerificationCode">获取验证码</el-button>-->
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <!--<el-input v-model="forgtPwd2.yanZhengMa" style="width:80%"/>-->
            <el-button type="primary" :disabled="disableCodeBtn" style="width: 120px; height: 47px;" @click="getVerificationCode">{{ codeText }}</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12" :offset="6">
          <el-button type="primary" :disabled="!forgtPwd2.yanZhengMa" class="forgtPwd1Btn" @click="Next2">下一步</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'ForgtPwd2',
  props: ['telphone'],
  data() {
    return {
      codeText: '获取验证码',
      disableCodeBtn: false,
      forgtPwd2: {
        yanZhengMa: ''
      },
      rules: {}
    }
  },
  mounted() {
    this.$form = this.$refs.form
    // this.initRules()
  },
  methods: {
    initRules() {
      const NULL_TIP = this.CONST.NULL_TIP
      this.rules = {
        yanZhengMa: [{ required: true, message: NULL_TIP, trigger: ['change', 'blur'] }]
      }
      this.$nextTick(() => {
        this.$form.clearValidate()
      })
    },
    getVerificationCode() {
      this.get('/login/sendVerificationCode', { mobile: this.telphone }).then(res => {
        this.forgtPwd2.yanZhengMa = res
        this.countDown()
      }).catch(_ => {
        this.countDown(0)
      })
    },
    Next2() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const param = {
            mobile: this.telphone,
            verificationCode: this.forgtPwd2.yanZhengMa
          }
          this.get('/login/validateVerificationCode', param).then(res => {
            this.$emit('nextClick', this.telphone)
          })
        }
      })
    },
    countDown(time = 60) {
      if (time === 0) {
        this.disableCodeBtn = false
        this.codeText = '获取验证码'
        return
      } else {
        this.disableCodeBtn = true
        this.codeText = '重新发送(' + time + ')'
        time--
      }
      setTimeout(() => {
        this.countDown(time)
      }, 1000)
    }
  }
}
</script>
<style lang="scss">
  .forgt-pwd2 .el-input input, .forgt-pwd2 .el-input {
    height: 38px;
  }
</style>
